<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图标生成器</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
      background: #f5f5f5;
    }
    .container {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      max-width: 600px;
    }
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    .preview {
      display: flex;
      gap: 20px;
      margin: 30px 0;
      justify-content: center;
      flex-wrap: wrap;
    }
    .icon-preview {
      text-align: center;
    }
    canvas {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      margin: 5px;
      transition: transform 0.2s;
    }
    button:hover {
      transform: translateY(-2px);
    }
    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }
    .info {
      background: #e7f3ff;
      padding: 15px;
      border-radius: 6px;
      margin-top: 20px;
      color: #0c5460;
      font-size: 14px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎨 Chrome插件图标生成器</h1>
    <p>为 Auto Augment Register 插件生成所需的图标</p>
    
    <div class="preview">
      <div class="icon-preview">
        <canvas id="canvas16" width="16" height="16"></canvas>
        <div>16x16</div>
      </div>
      <div class="icon-preview">
        <canvas id="canvas48" width="48" height="48"></canvas>
        <div>48x48</div>
      </div>
      <div class="icon-preview">
        <canvas id="canvas128" width="128" height="128"></canvas>
        <div>128x128</div>
      </div>
    </div>

    <div class="buttons">
      <button onclick="downloadIcon(16)">下载 icon16.png</button>
      <button onclick="downloadIcon(48)">下载 icon48.png</button>
      <button onclick="downloadIcon(128)">下载 icon128.png</button>
      <button onclick="downloadAll()">下载全部图标</button>
    </div>

    <div class="info">
      <strong>使用说明：</strong><br>
      1. 点击上面的按钮下载对应尺寸的图标<br>
      2. 将下载的图标文件放入 <code>icons/</code> 文件夹<br>
      3. 在Chrome中加载插件即可使用
    </div>
  </div>

  <script>
    // 绘制图标
    function drawIcon(canvas, size) {
      const ctx = canvas.getContext('2d');
      
      // 创建渐变背景
      const gradient = ctx.createLinearGradient(0, 0, size, size);
      gradient.addColorStop(0, '#667eea');
      gradient.addColorStop(1, '#764ba2');
      
      // 绘制圆角矩形背景
      const radius = size * 0.2;
      ctx.fillStyle = gradient;
      ctx.beginPath();
      ctx.moveTo(radius, 0);
      ctx.lineTo(size - radius, 0);
      ctx.quadraticCurveTo(size, 0, size, radius);
      ctx.lineTo(size, size - radius);
      ctx.quadraticCurveTo(size, size, size - radius, size);
      ctx.lineTo(radius, size);
      ctx.quadraticCurveTo(0, size, 0, size - radius);
      ctx.lineTo(0, radius);
      ctx.quadraticCurveTo(0, 0, radius, 0);
      ctx.closePath();
      ctx.fill();
      
      // 绘制字母 "A"
      ctx.fillStyle = 'white';
      ctx.font = `bold ${size * 0.6}px Arial`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('A', size / 2, size / 2);
    }

    // 初始化绘制所有尺寸的图标
    function initIcons() {
      drawIcon(document.getElementById('canvas16'), 16);
      drawIcon(document.getElementById('canvas48'), 48);
      drawIcon(document.getElementById('canvas128'), 128);
    }

    // 下载单个图标
    function downloadIcon(size) {
      const canvas = document.getElementById(`canvas${size}`);
      const link = document.createElement('a');
      link.download = `icon${size}.png`;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }

    // 下载所有图标
    function downloadAll() {
      setTimeout(() => downloadIcon(16), 100);
      setTimeout(() => downloadIcon(48), 300);
      setTimeout(() => downloadIcon(128), 500);
    }

    // 页面加载时初始化
    window.onload = initIcons;
  </script>
</body>
</html>

